<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="notching"></div>
        <div class="loading-box">
            <div class="progress-bar"></div>
        </div>
		<div class="coupon">50</div>
	</body>
	<style>
		/* 
        第一个线性渐变从 135 度方向开始，先显示 15 像素宽的透明区域，然后过渡到 deeppink 颜色。
        第二个线性渐变从 -135 度方向开始，同样有 15 像素宽的透明起始区域，然后过渡到 deeppink 。
        第三个线性渐变从 -45 度方向开始，透明起始区域为 15 像素，然后过渡到 deeppink 。
        第四个线性渐变从 45 度方向开始，15 像素透明起始，接着是 deeppink 。
        background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;：设置每个线性渐变的大小为元素宽高的 50%。
        background-position: top left, top right, bottom right, bottom left;：分别指定四个线性渐变的位置为元素的左上角、右上角、右下角、左下角。

        linear-gradient(135deg, transparent 15px, deeppink 0)
            135deg 表示线性渐变的方向，即以 135 度的角度进行渐变。
            transparent 15px 表示从起始位置开始，先显示 15 像素宽度的透明色。
            deeppink 0 表示在 0 位置（即 15 像素之后）开始显示 deeppink 颜色，并一直延续到结束。
    */
		.notching {
			width: 200px;
			height: 120px;
			background: linear-gradient(135deg, transparent 15px, deeppink 0),
				linear-gradient(-135deg, transparent 15px, deeppink 0),
				linear-gradient(-45deg, transparent 15px, deeppink 0),
				linear-gradient(45deg, transparent 15px, deeppink 0);
			background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
			background-position: top left, top right, bottom right, bottom left;
			background-repeat: no-repeat;
		}
        .loading-box{
            width: 100px;
            height: 20px;
            overflow: hidden;
            border-radius: 8px 8px 8px 8px;
        }
        /* 
        重复的渐变  repeating-linear-gradient  实现加载条效果
        如果使用 linear-gradient  那么需要一直重复
        linear-gradient(
            45deg, 
            #f06a0e, 
            #f06a0e 11px, 
            transparent 11px, 
            transparent 20px, 
            #f06a0e 20px, 
            #f06a0e 31px, 
            transparent 31px, 
            transparent 40px,
            #f06a0e 40px, 
            #f06a0e 51px, 
            transparent 51px, 
            transparent 60px
        );
        */
		.progress-bar {
            width: 200px;
            height: 20px;
            background-color:  rgba(206, 207, 206, 0.2);
			background-image: repeating-linear-gradient(
				45deg,
				#f06a0e,
				#f06a0e 9px,
				transparent 9px,
				transparent 16px
			);
            animation: loading .8s linear infinite;
		}
        @keyframes loading {
            0%{
                transform: translateX(-50px);
            }
            50%{
                transform: translateX(-30px);
            }
            100%{
                transform: translateX(0px);
            }
        }

        /* .progress-bar {
            width: 300px;
            height: 20px;
            background-color: rgb(28, 219, 28);
            background-size: 6%;
            background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%);
            animation: loading 6s linear infinite;
		}
        @keyframes loading {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 100%;
            }
        } */


        /* 
        优惠券的思想： 利用多层渐变的组合，重叠在一起拼出想要的图形
        background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
        - radial-gradient 表示这是一个径向渐变。
        - circle 表示渐变的形状是圆形。如果是 ellipse 则表示椭圆形。
        - at -5px 10px 定义了渐变的中心位置，在水平方向上距离左侧 -5 像素，在垂直方向上距离顶部 10 像素。
        - transparent 12px 表示从中心开始到 12 像素的位置是透明的。
        - #fff 13px 表示从 12 像素的位置开始到 13 像素的位置是白色（#fff）。
        - #fff 0px 表示从 13 像素的位置开始到结束都是白色。
        */
        .coupon {
            position: relative;
            width: 400px;
            height: 160px;
            margin: 20px auto;
            background: linear-gradient(90deg, #945700 0%, #f49714 100%);
            filter: drop-shadow(-7px 4px 3px #333);
            font-size: 100px;
            color: #fff;
            font-weight: bold;
            line-height: 160px;
            padding-left: 60px;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 5px;
            text-shadow: -2px -2px 2px #333;
            
            &::before{
                content: "";  /* 必须设置，用于显示伪元素 */
                position: absolute; 
                top: 0;  /* 顶部与父元素顶部对齐 */
                right: 0;  /* 右侧与父元素右侧对齐 */
                bottom :0; /* 底部与父元素底部对齐 */
            }
            &::after {
                content: "";  /* 必须设置，用于显示伪元素 */
                position: absolute; 
                top: 0;  /* 顶部与父元素顶部对齐 */
                right: 0;  /* 右侧与父元素右侧对齐 */
                bottom :0; /* 底部与父元素底部对齐 */
            }
            
            &::before {
                width: 10px;
                background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
                background-size: 20px 20px;
                background-position: 0 15px;
            }
            
            &::after {
                width: 15px;
                background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
                background-size: 20px 40px;
                background-position: 0 15px;
            }
        }
	</style>
</html>
